<template>
	<view>
		<!-- 导航栏 -->
		<view class="box-main-top" :style="{ height: homeTop+88 + 'rpx' }">
			<!-- 导航栏 -->
			<view class="head-wrapper" id="home" :style="{ top: homeTop + 'rpx' }">
				<image class="box-logo " src="https://yjgs.jsonbug.com/test/wx_logo.png" mode="aspectFill"></image>
			</view>
			<!-- end -->
		</view>
		<!-- end -->

		<view :style="{ height: homeTop+200 + 'rpx' }"> </view>

		<!-- 导航栏 -->
		<view id='nav' class="box-tabs  mt-20 box-tabs-fixed" :style="{ top: homeTop+68 + 'rpx' }">
			<view @click="tabsSelect(4)" class="flex ac jc fc pos-r mr-40">
				<view class="box-tabs-txt " :style="{fontSize:current==4?'34rpx':''}">
					<text :style="{color:current==4?'#0808D8':''}">关于</text>
					<text>我们</text>
				</view>
				<view v-if="current == 4" class="pos-a" style="top: 26rpx;">
					<image src="https://yjgs.jsonbug.com/test/wx-tabls-select.png" style="width: 50rpx;height: 15rpx;">
					</image>
				</view>
			</view>
			<view @click="tabsSelect(3)" class="flex ac jc fc pos-r mr-40">
				<view class="box-tabs-txt " :style="{fontSize:current==3?'34rpx':''}">
					<text :style="{color:current==3?'#0808D8':''}">会员</text>
					<text>服务</text>
				</view>
				<view v-if="current == 3" class="pos-a" style="top: 26rpx;">
					<image src="https://yjgs.jsonbug.com/test/wx-tabls-select.png" style="width: 50rpx;height: 15rpx;">
					</image>
				</view>
			</view>
			<view @click="tabsSelect(2)" class="flex ac jc fc pos-r">
				<view class="box-tabs-txt " :style="{fontSize:current==2?'34rpx':''}">
					<text :style="{color:current==2?'#0808D8':''}">沙龙</text>
					<text>活动</text>
				</view>
				<view v-if="current == 2" class="pos-a" style="top: 26rpx;">
					<image src="https://yjgs.jsonbug.com/test/wx-tabls-select.png" style="width: 50rpx;height: 15rpx;">
					</image>
				</view>
			</view>
			<!-- <view @click="tabsSelect(0)" class="flex ac jc fc pos-r">
				<view class="box-tabs-txt " :style="{fontSize:current==0?'34rpx':''}">
					<text :style="{color:current==0?'#0808D8':''}">贵商</text>
					<text>故事</text>
				</view>
				<view v-if="current == 0" class="pos-a" style="top: 26rpx;">
					<image src="https://yjgs.jsonbug.com/test/wx-tabls-select.png" style="width: 50rpx;height: 15rpx;">
					</image>
				</view>
			</view> -->
			<!-- <view @click="tabsSelect(1)" class="flex ac jc fc pos-r">
				<view class="box-tabs-txt " :style="{fontSize:current==1?'34rpx':''}">
					<text :style="{color:current==1?'#0808D8':''}">企业</text>
					<text>探访</text>
				</view>
				<view v-if="current == 1" class="pos-a" style="top: 26rpx;">
					<image src="https://yjgs.jsonbug.com/test/wx-tabls-select.png" style="width: 50rpx;height: 15rpx;">
					</image>
				</view>
			</view> -->
		</view>
		<!-- end -->


		<!-- 关于我们 -->
		<u-skeleton :title="false" :rows="1" :rowsWidth="['100%']" :rowsHeight="120" :loading="itemObj1Loading">
			<view id="id4">
				<view v-if="itemObj1.introduce" class="pl-20 pr-20 pb-20 pt-10">
					<image @click="toPage('关于我们')" style="width: 100%;" :src="$timer.ensureUrl(itemObj1.about_us_image)"
						mode="widthFix"></image>
				</view>
			</view>
		</u-skeleton>
		<!-- end -->


		<!-- 平台服务 -->
		<view id="id3">

			<view class="flex ac">
				<view class="pos-r" style="top: 12rpx;left: 14rpx;">
					<image src="../../static/images/minlogo.png" style="height: 38rpx;width: 42rpx;"></image>
				</view>
				<view class="flex ac sb pl-20 pr-20 mt-20">
					<view class="box-title-txt">
						<text style="color: #0808D8;">会员</text>
						<text>服务</text>
					</view>
				</view>
			</view>


			<!-- vip -->
			<view @click="toPage('vip')" class="ml-20 mr-20 mt-20">
				<image style="width: 100%;" :src="$timer.ensureUrl('/storage/default/20241220/33-03.png')"
					mode="widthFix"></image>
			</view>
			<!-- end -->

			<u-skeleton rows="2" :rowsHeight="['30px','80px']" :rowsWidth="['100%','100%']"
				:loading="serviceListLoading" :title="false">
				<view class="bg-white mt-10 pt-5 ml-20 mr-20 br-12">
					<view v-for="(item,index) in serviceList" :key="index" class="box-card-item ">
						<view v-if="item.type" class="c-333">
							<text class="fs-32">
								{{item.type || ''}}
							</text>
						</view>
						<view class="box-form-item ">
							<image @click="toPage('服务案例展示',cur)" v-for="(cur,_index) in item.info" :key="_index"
								:src="$timer.ensureUrl(cur.image)" style="width: 100%;" mode="widthFix">
							</image>
						</view>
					</view>
				</view>
			</u-skeleton>

		</view>
		<!-- end -->


		<!-- 平台动态 -->
		<view id="id2">
			<view class="flex ac sb pl-20 pr-20 mt-30">
				<view class="flex ac">
					<view class="pos-r" style="top: 6rpx;left: -4rpx;">
						<image src="../../static/images/minlogo.png" style="height: 38rpx;width: 42rpx;"></image>
					</view>
					<view class="box-title-txt">
						<text style="color: #0808D8;">沙龙</text>
						<text>活动</text>
					</view>
				</view>

				<view @click="toPage('平台动态')" style="color: #999;">
					<text>查看更多</text>
					<text class="iconfont icon-gengduo3 fs-24 ml-5"></text>
				</view>
			</view>

			<u-skeleton :loading="dataList3Loading" rows="1" :rowsWidth="['100%']" :rowsHeight="['100px']">
				<swiper @change="swiperG($event,'平台动态')" style="min-height: 680rpx;max-height: auto;" circular
					:autoplay="autoplayZ" :interval="3000" :duration="500" :class="{ 'swiper-guide': showGuide }">
					<swiper-item v-for="(item,index) in dataList3" :key="index">
						<view class="box-card-list bb p-20">
							<view class="fw fs-34">
								<text>{{item.title || ''}}</text>
							</view>
							<view v-if="item.describe" class="mt-10 line-3">
								<text class="fs-26" style="color: #707070;">{{item.describe || ''}}</text>
							</view>
							<view class="mt-20 pos-r">
								<view v-if="item.video" @click="playVideo(index,'平台动态')">
									<view v-if="index != currentVideoZ">
										<image class="br-12 "
											:src="$timer.ensureUrl(item.cover) || 'https://yjgs.jsonbug.com/storage/default/20241108/20241109164114.jpg'"
											mode="aspectFill" style="height: 380rpx;width: 100%;"></image>
										<image
											src="https://yjgs.jsonbug.com/storage/default/20241108/video_play_icon.png"
											style="width: 96rpx;height: 96rpx;left: 50%;top: 50%;transform:translate(-50%,-50%)"
											class="br-100p pos-a"></image>
									</view>
									<video :enable-progress-gesture="false" v-if="index == currentVideoZ" autoplay
										:poster='$timer.ensureUrl(item.cover)' id="video-1"
										style="height: 380rpx;width: 100%;border-radius: 12rpx;"
										:src="$timer.ensureUrl(item.video)">
									</video>
								</view>

								<swiper v-else :autoplay='true'
									:indicator-dots="$timer.strToArr(item.carousel_images).length > 1"
									style="height: 380rpx;">
									<swiper-item @click="preViewClick(item,_index)"
										v-for="(cur, _index) in $timer.strToArr(item.carousel_images)" :key="_index">
										<image :src="cur" style="width: 100%;height: 380rpx;border-radius: 12rpx;">
										</image>
									</swiper-item>
								</swiper>
							</view>
							<view class="mt-10 flex ac sb">
								<view style="color: #707070;">
									<text>{{$timer.formatTime(item.create_time,'yyyy年mm月dd日')}}</text>
								</view>
								<button open-type="share" hover-class="none" class="protoButton">
									<view style="color: #707070;">
										<text class="iconfont-yjgs  fs-40">
											&#xe68c;
										</text>
										<text>分享</text>
									</view>
								</button>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</u-skeleton>
		</view>
		<!-- end -->


		<!-- 贵商故事 -->
		<!-- <view id="id0">
			<view class="flex ac sb pl-20 pr-20 mt-30">
				<view class="flex ac">
					<view class="pos-r" style="top: 6rpx;left: -4rpx;">
						<image src="../../static/images/minlogo.png" style="height: 38rpx;width: 42rpx;"></image>
					</view>
					<view class="box-title-txt">
						<text style="color: #0808D8;">贵商</text>
						<text>故事</text>
					</view>
				</view>
				<view @click="toPage('贵商故事')" style="color: #999;">
					<text>查看更多</text>
					<text class="iconfont icon-gengduo3 fs-24 ml-5"></text>
				</view>
			</view>
			<swiper @change="swiperG($event,'贵商故事')" style="min-height: 680rpx;max-height: auto;" circular
				:autoplay="autoplayG" :interval="4000" :duration="500">
				<swiper-item v-for="(item,index) in dataList1" :key="index">
					<view class="box-card-list bb p-20">
						<view class="fw fs-34">
							<text>{{item.title || ''}}</text>
						</view>
						<view v-if="item.describe" class="mt-10 line-3">
							<text class="fs-26" style="color: #707070;">{{item.describe || ''}}</text>
						</view>
						<view class="mt-20 pos-r">
							<view v-if="item.video " @click="playVideo(index,'贵商故事')">
								<view v-if="index != currentVideoG">
									<image class="br-12 "
										:src="$timer.ensureUrl(item.cover) || 'https://yjgs.jsonbug.com/storage/default/20241108/20241109164114.jpg'"
										mode="aspectFill" style="height: 380rpx;width: 100%;"></image>
									<image src="https://yjgs.jsonbug.com/storage/default/20241108/video_play_icon.png"
										style="width: 96rpx;height: 96rpx;left: 50%;top: 50%;transform:translate(-50%,-50%)"
										class="br-100p pos-a"></image>
								</view>
								<video :enable-progress-gesture="false" v-if="index == currentVideoG" autoplay
									:poster='$timer.ensureUrl(item.cover)' id="video-1"
									style="height: 380rpx;width: 100%;border-radius: 12rpx;"
									:src="$timer.ensureUrl(item.video)">
								</video>
							</view>
							<swiper v-else :autoplay='true'
								:indicator-dots="$timer.strToArr(item.carousel_images).length > 1"
								style="height: 380rpx;">
								<swiper-item @click="preViewClick(item,_index)"
									v-for="(cur, _index) in $timer.strToArr(item.carousel_images)" :key="_index">
									<image :src="cur" style="width: 100%;height: 380rpx;border-radius: 12rpx;"></image>
								</swiper-item>
							</swiper>
						</view>
						<view class="mt-10 flex ac sb">
							<view style="color: #707070;">
								<text>{{$timer.formatTime(item.create_time,'yyyy年mm月dd日')}}</text>
							</view>
							<button open-type="share" hover-class="none" class="protoButton">
								<view style="color: #707070;">
									<text class="iconfont-yjgs  fs-40">
										&#xe68c;
									</text>
									<text>分享</text>
								</view>
							</button>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view> -->
		<!-- end -->

		<!-- 企业探访 -->
		<!-- <view id="id1">
			<view class="flex ac sb pl-20 pr-20 mt-30">
				<view class="flex ac">
					<view class="pos-r" style="top: 6rpx;left: -4rpx;">
						<image src="../../static/images/minlogo.png" style="height: 38rpx;width: 42rpx;"></image>
					</view>
					<view class="box-title-txt">
						<text style="color: #0808D8;">企业</text>
						<text>探访</text>
					</view>
				</view>
				<view @click="toPage('企业探访')" style="color: #999;">
					<text>查看更多</text>
					<text class="iconfont icon-gengduo3 fs-24 ml-5"></text>
				</view>
			</view>
			<swiper @change="swiperG($event,'企业探访')" style="min-height: 680rpx;max-height: auto;" circular
				:autoplay="autoplayQ" :interval="5000" :duration="500">
				<swiper-item v-for="(item,index) in dataList2" :key="index">
					<view class="box-card-list bb p-20">
						<view class="fw fs-34">
							<text>{{item.title || ''}}</text>
						</view>
						<view v-if="item.describe" class="mt-10 line-3">
							<text class="fs-26" style="color: #707070;">{{item.describe || ''}}</text>
						</view>
						<view class="mt-20 pos-r">
							<view v-if="item.video " @click="playVideo(index,'企业探访')">
								<view v-if="index != currentVideoQ">
									<image class="br-12 "
										:src="$timer.ensureUrl(item.cover) || 'https://yjgs.jsonbug.com/storage/default/20241108/20241109164114.jpg'"
										mode="aspectFill" style="height: 380rpx;width: 100%;"></image>
									<image src="https://yjgs.jsonbug.com/storage/default/20241108/video_play_icon.png"
										style="width: 96rpx;height: 96rpx;left: 50%;top: 50%;transform:translate(-50%,-50%)"
										class="br-100p pos-a"></image>
								</view>
								<video :enable-progress-gesture="false" v-if="index == currentVideoQ" autoplay
									:poster='$timer.ensureUrl(item.cover)' id="video-1"
									style="height: 380rpx;width: 100%;border-radius: 12rpx;"
									:src="$timer.ensureUrl(item.video)">
								</video>
							</view>

							<swiper v-else :autoplay='true'
								:indicator-dots="$timer.strToArr(item.carousel_images).length > 1"
								style="height: 380rpx;">
								<swiper-item @click="preViewClick(item,_index)"
									v-for="(cur, _index) in $timer.strToArr($timer.ensureUrl(item.carousel_images))"
									:key="_index">
									<image :src="cur" style="width: 100%;height: 380rpx;border-radius: 12rpx;"></image>
								</swiper-item>
							</swiper>

						</view>
						<view class="mt-10 flex ac sb">
							<view style="color: #707070;">
								<text>{{$timer.formatTime(item.create_time,'yyyy年mm月dd日')}}</text>
							</view>
							<button open-type="share" hover-class="none" class="protoButton">
								<view style="color: #707070;">
									<text class="iconfont-yjgs  fs-40">
										&#xe68c;
									</text>
									<text>分享</text>
								</view>
							</button>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view> -->
		<!-- end -->


		<!-- <view class="mlr wfc ">
			<image class="image-bottom" src="https://yjgs.jsonbug.com/storage/default/20241119/20241119144132.png"
				mode="widthFix"></image>
		</view> -->
		
		<view class=" mt-20 mlr wfc">
			<image 
				src="https://yjgs.jsonbug.com/storage/default/20250328/yjgs.png" mode="widthFix">
			</image>
		</view>

		<view style="height: 140rpx;"></view>

		<!--自定义底部tab-->
		<customTab :newData="newData" :activeRouter="activeRouter"></customTab>
	</view>
</template>
<script>
	import {
		serviceList,
		serviceInfo,
		serviceTrendGetInfo
	} from "@/api/extend.js"
	import {
		getNavigation
	} from '@/api/public.js';
	import customTab from '@/components/customTab';
	import parser from "@/components/jyf-parser/jyf-parser";
	export default {
		components: {
			customTab,
			parser
		},
		data() {
			return {
				dataList3Loading: true,
				serviceListLoading: true,
				itemObj1Loading: true,
				autoplayG: true, // 贵商故事是否自动滚动
				autoplayQ: true, // 企业探访是否自动滚动
				autoplayZ: true, // 最新动态是否自动滚动
				currentVideoG: -1, //贵商故事当前视频播放索引
				currentVideoQ: -1, //企业探访当前视频播放索引
				currentVideoZ: -1, //最新动态当前视频播放索引
				currentVideo: -1, //当前播放的索引
				navBottom: 0,
				showView: false,
				itemObj1: {},
				dataList1: [], // 贵商故事
				dataList2: [], //企业探访
				dataList3: [], // 最新动态
				serviceList: [],
				homeTop: 88,
				newData: {},
				activeRouter: '',
				current: 4,
				showGuide: false, // 是否显示引导动画
			};
		},
		watch: {
			currentVideoG(newVal, newOld) {
				if (newVal == -1) {
					this.autoplayG = true;
				} else {
					this.autoplayG = false;
				}
			},
			currentVideoQ(newVal, newOld) {
				if (newVal == -1) {
					this.autoplayQ = true;
				} else {
					this.autoplayQ = false;
				}
			},
			currentVideoZ(newVal, newOld) {
				if (newVal == -1) {
					this.autoplayZ = true;
				} else {
					this.autoplayZ = false;
				}
			}
		},

		/**
		 * 用户点击右上角分享
		 * 
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			let that = this;
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			return {
				title: '贵商服务',
				imageUrl: "https://yjgs.jsonbug.com/storage/default/20241220/share.png",
				path: '/pages/index/index?uid=' + (that.uid || -1)
			};
		},
		onShareTimeline: function() {
			let that = this;
			return {
				title: '贵商服务',
				query: {
					uid: this.uid || -1
				},
				imageUrl: 'https://yjgs.jsonbug.com/storage/default/20241220/share.png'
			};
		},
		computed: {
			version() {
				return this.$store.state.extend.version
			},
			uid() {
				return this.$store.state.app.uid
			}
		},
		// #endif
		onLoad(options) {
			this.$store.commit('SET_sonShop', false)
			this.$store.commit('SET_merId', 0)
			this.getNav();
			this.serviceListFunc();
			this.serviceInfo();
			this.serviceTrendGetInfoFunc();
		},
		onReady() {
			// #ifdef MP-WEIXIN
			this.$nextTick(function() {
				// #ifdef MP
				const menuButton = uni.getMenuButtonBoundingClientRect();
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#home')
					.boundingClientRect(data => {
						this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
					})
					.exec();
				// #endif
			});
			// #endif
		},
		created(options) {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			this.activeRouter = '/' + curRoute
		},
		onPullDownRefresh() {
			this.serviceListFunc();
			this.serviceInfo();
			this.serviceTrendGetInfoFunc();
			uni.stopPullDownRefresh();
		},
		methods: {
			swiperG(e, type) {
				if (type == '贵商故事') {
					this.currentVideoG = -1;
					return
				}
				if (type == '企业探访') {
					this.currentVideoQ = -1;
					return
				}
				if (type == '平台动态') {
					this.currentVideoZ = -1;
					return
				}
			},
			preViewClick(item, _index) {
				if (item.to_url) {
					uni.setStorageSync('webViewUrl', item.to_url);
					uni.navigateTo({
						url: item.to_url
					})
				} else {
					this.$timer.preView(this.$timer.strToArr(item.carousel_images), _index)
				}
			},
			playVideo(index, type) {
				// 暂停其他正在播放的视频
				if (this.currentVideoG !== -1 && type !== '贵商故事') {
					this.currentVideoG = -1;
				}
				if (this.currentVideoQ !== -1 && type !== '企业探访') {
					this.currentVideoQ = -1;
				}
				if (this.currentVideoZ !== -1 && type !== '平台动态') {
					this.currentVideoZ = -1;
				}

				// 设置当前要播放的视频
				if (type == '贵商故事') {
					this.currentVideoG = index;
				} else if (type == '企业探访') {
					this.currentVideoQ = index;
				} else if (type == '平台动态') {
					this.currentVideoZ = index;
				}
			},
			serviceTrendGetInfoFunc() {
				serviceTrendGetInfo().then(res => {
					this.dataList1 = res.data.item1;
					this.dataList2 = res.data.item2;
					this.dataList3 = res.data.item3;
					this.dataList3Loading = false;
					this.checkGuideStatus();
				})
			},
			serviceInfo() {
				serviceInfo().then(res => {
					this.itemObj1 = res.data;
					this.itemObj1Loading = false;
					this.$store.commit("SET_MyCompany", res.data);
				})
			},
			toPage(tag, item) {

				if (tag == 'vip') {
					uni.navigateTo({
						url: '/pages/extend/user_vip/user_vip'
					})
					return;
				}

				if (tag == '服务案例展示') {
					uni.navigateTo({
						url: '/pages/extend/service/service_case?category_id=' + item.category_id
					})
					return;
				}

				if (tag == '贵商故事') {
					uni.navigateTo({
						url: '/pages/index/index_desc?title=贵商&tag=故事'
					})
					return;
				}
				if (tag == '企业探访') {
					uni.navigateTo({
						url: '/pages/index/index_desc?title=企业&tag=探访'
					})
					return;
				}
				if (tag == '平台动态') {
					uni.navigateTo({
						url: '/pages/index/index_desc?title=平台&tag=动态'
					})
					return;
				}
				if (tag == '关于我们') {
					uni.navigateTo({
						url: '/pages/extend/user/index_about_us'
					})
					return;
				}
			},
			serviceListFunc() {
				serviceList().then(res => {
					this.serviceList = res.data;
					this.serviceListLoading = false;
				})
			},
			tabsSelect(index) {
				this.current = index;
				this.$nextTick((res) => {
					const _this = this;

					// 获取 navBottom 的函数
					const getNavBottom = () => {
						return new Promise((resolve) => {
							if (_this.navBottom > 0) {
								resolve(_this.navBottom);
							} else {
								const queryNav = uni.createSelectorQuery();
								queryNav.select('#nav').boundingClientRect((rect) => {
									if (rect) {
										_this.navBottom = rect.bottom;
									}
									resolve(_this.navBottom);
								}).exec();
							}
						});
					};

					// 执行滚动操作
					const scrollToElement = (navBottom) => {
						// 滚动到页面顶部
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0
						});

						// 获取目标元素的位置并滚动
						const query = uni.createSelectorQuery();
						query.select(`#id${index}`).boundingClientRect((rect) => {
							if (rect) {
								const scrollTop = rect.top - (navBottom + 10);
								// 滚动到目标元素
								uni.pageScrollTo({
									scrollTop: scrollTop,
									duration: 200
								});
							}
						}).exec();
					};

					// 先获取 navBottom，然后执行滚动
					getNavBottom().then(scrollToElement);
				})
			},
			getNav() {
				getNavigation().then(res => {
					this.newData = res.data;
					if (this.newData.status && this.newData.status.status) {
						uni.hideTabBar()
					} else {
						uni.showTabBar()
					}
				})
			},
			checkGuideStatus() {
				// 每次进入页面都显示引导动画
				this.showGuide = true;
				// 动画结束后移除引导状态
				setTimeout(() => {
					this.showGuide = false;
				}, 3000);
			},
		},
		mounted() {

		},
		// 滚动到底部
		onReachBottom() {

		},
		// 滚动监听
		onPageScroll(e) {}
	};
</script>
<style lang="scss" scoped>
	
	.image-bottom {
		max-width: 300rpx;
		max-height: 52rpx;
		overflow: hidden;
	}

	.protoButton {
		background: none;
		border: none;
		outline: none;
		padding: 0;
		margin: 0;
		font: inherit;
		color: inherit;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
		display: inline-block;
	}

	.box-form-item {
		margin-top: 20rpx;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20rpx;
	}

	.box-card-item {
		box-sizing: border-box;
		font-weight: bold;
		font-size: 34rpx;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
		margin-top: 10rpx;
		height: auto;
		width: calc(100% - 20rpx);
		background-color: white;
	}

	.box-card-list {
		margin: 0rpx 20rpx;
		background-color: white;
		height: auto;
		border-radius: 10rpx;
		margin-top: 24rpx;
	}

	.box-title-txt {
		font-weight: bold;
		font-size: 36rpx;
		box-sizing: border-box;
		// font-style: oblique;
	}

	.box-tabs-txt {
		color: #000000;
		font-size: 30rpx;
	}

	.box-tabs-fixed {
		position: fixed;
		width: 100%;
	}

	.box-tabs {
		z-index: 99999;
		padding-left: 20rpx;
		padding-right: 20rpx;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		font-weight: bold;
		font-size: 32rpx;
		box-sizing: border-box;
		width: 100%;
		height: 100rpx;
		opacity: 1;
		background: #FFFFFF;
	}

	.box-main-top {
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		width: 100%;
		background-color: white;
		z-index: 99;
	}

	.box-logo {
		width: 240rpx;
		height: 41rpx;
	}

	.head-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	@keyframes swiperGuide {
		0% {
			transform: translateX(0);
		}

		20% {
			transform: translateX(-40rpx);
		}

		40% {
			transform: translateX(0);
		}

		60% {
			transform: translateX(40rpx);
		}

		80% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(0);
		}
	}

	.swiper-guide {
		animation: swiperGuide 2.5s ease-in-out;
		animation-delay: 0.5s;
	}
</style>